<template>
  <div v-if="inited">
    <!-- <Manual v-if="currentTab === 'manual'" /> -->
    <Tabs
      type="card"
      :value="currentTab"
      :animated="false"
      @on-click="handleClickTab"
    >
      <TabPane name="manual" label="手工调整单">
        <Manual v-if="currentTab === 'manual'" />
      </TabPane>
      <TabPane name="system" label="系统调整单">
        <System v-if="currentTab === 'system'" />
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import Manual from './Manual';
import System from './System';

export default {
  name: 'AdjustSheet',
  components: {
    Manual,
    System
  },
  data() {
    return {
      currentTab: 'manual',
      inited: false
    };
  },
  created() {
    const { tab } = this.$route.params;
    if (this.validTab(tab)) {
      this.currentTab = tab;
    } else {
      this.$router.replace({ path: this.currentTab });
    }
    setTimeout(() => {
      this.inited = true;
    }, 100);
  },
  methods: {
    handleClickTab(name) {
      this.$router.replace({ path: name });
    },
    validTab(tab) {
      return tab && ['manual', 'system'].includes(tab);
    }
  }
};
</script>
